<template>
  <div class="recomPlaylist">
    <div class="con-box">
      <div class="box_img">
        <img
          :src="cdlist.logo"
          alt=""
        >
      </div>
      <div class="box_txt">
        <h2 class="txt_title">{{cdlist.dissname}}</h2>
        <p class="txt_name">
          <img
            :src="cdlist.headurl"
            alt=""
          >
          {{cdlist.nickname}}
        </p>
        <p class="txt_playNum">播放量:{{cdlist.visitnum}}</p>
      </div>
      <div
        href="#"
        class="play_btn"
      >
        <van-icon
          class="btn_icon"
          name="play"
        />
      </div>
    </div>
    <div class="song-box">
      <div class="count_box">
        <div class="count_box_txt">
          歌单
          <span class="count_box_num">共{{cdlist.cur_song_num}}首</span>
        </div>
        <div class="count_box_ctrl">
          收藏
          <!-- 下载 -->
          <van-icon
            name="like-o"
            class="count_box_ctrl_icon"
          />
        </div>
      </div>
      <!-- 歌曲列表 -->
      <ul class="song_box_list">
        <li
          class="song_box_item"
          v-for="item in songs"
          :key="item.id"
        >
          <div
            class="song_item__bd"
            @click="goToSong(item.mid)"
          >
            <h3
              class="song_item_tit"
              v-text="item.title"
            ></h3>
            <p class="song_item_desc">
              {{item.singer[0].title}} • {{item.title}}
            </p>
          </div>
          <div
            class="song_item_icon"
            @click="downloadSong"
          >
            <van-icon
              name="back-top"
              class="song_item_icon_i"
            />
          </div>
        </li>
      </ul>
      <!-- 加载按钮 -->
      <div
        class="addBtn"
        @click="addSongs"
        v-text="btntxt"
        v-show="btntxt==''?false:true"
      ></div>
      <!-- 歌单简介 -->
      <div class="song-con-txt">
        <h4>歌单简介</h4>
        <p v-html="cdlist.desc"></p>
      </div>
    </div>
  </div>
</template>
<script>
//弹框提示
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  data: () => ({
    id: null,
    cdlist: {},
    songListAll: [],
    songs: [],
    num: 1,
    btntxt: '点击加载更多歌曲'
  }),
  created() {
    this.id = this.$router.history.current.params.id
    this.getSongListDetailR(this.id)
  },
  methods: {
    //获取歌单信息
    async getSongListDetailR(id) {
      const res = await this.$http.getSongListDetailR(id)
      // console.log(res.data.response.cdlist[0])
      const itemNum = res.data.response.cdlist[0]
      // 在获取之前处理visitnum  显示以万为单位
      itemNum.visitnum = (itemNum.visitnum / 10000).toFixed(1) + "万"
      this.cdlist = itemNum
      this.songListAll = itemNum.songlist
      this.songs = itemNum.songlist.slice(0, 15)
    },
    // 加载更多
    addSongs() {
      ++this.num
      if (this.songs.length >= this.songListAll.length) {
        Toast('已经没有更多了');
        this.btntxt = ''
        return
      }
      this.songs = this.songListAll.slice(0, 15 * this.num)
    },
    //下载音乐
    downloadSong() {
      Toast('暂无资源');
    },
    //音乐播放
    goToSong(mid) {
      this.$router.push('/recomplaysong/' + mid)
    }
  },
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.recomPlaylist {
  padding: 44px 5px 50px;
  .con-box {
    margin: 10px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box_img {
      width: 210px;
      height: 210px;
      border-radius: 18px;
      box-shadow: 0 7px 13px rgba(0, 0, 0, 0.23);
      background-color: #dbdbdb;
      position: relative;
      margin-bottom: 25px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 18px;
        position: relative;
        z-index: 2;
      }
    }
    .box_img::before {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      right: -10px;
      margin-top: -78px;
      width: 160px;
      height: 160px;
      border-radius: 18px;
      z-index: -1;
      background-color: rgba(0, 0, 0, 0.06);
    }
    .box_txt {
      margin-bottom: 12px;
      max-width: 84%;
      text-align: center;
      color: #121212;
      .txt_title {
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 12px;
      }
      .txt_name {
        font-size: 18px;
        margin-bottom: 12px;
        img {
          display: inline-block;
          width: 22px;
          height: 22px;
          border-radius: 22px;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
      .txt_playNum {
        margin-bottom: 12px;
        color: grey;
        font-size: 14px;
      }
    }
    .play_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 210px;
      height: 44px;
      border-radius: 20px;
      box-shadow: 0 6px 32px rgba(24, 213, 156, 0.5);
      background-color: #22d59c;
      .btn_icon {
        color: #fff;
        font-size: 30px;
      }
    }
  }
  //歌单例表
  .song-box {
    margin: 0 16px;
    .count_box {
      display: flex;
      justify-content: space-between;
      color: grey;
      font-size: 14px;
      .count_box_ctrl {
        .count_box_ctrl_icon {
          font-size: 24px;
          vertical-align: middle;
        }
      }
    }
    //歌曲例表
    .song_box_list {
      list-style: none;
      .song_box_item {
        display: flex;
        justify-content: space-between;
        padding: 12px 0px;
        .song_item__bd {
          flex: 1;
          overflow: hidden;
          .song_item_tit {
            color: #000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 2px;
          }
          .song_item_desc {
            color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .song_item_icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          .song_item_icon_i {
            transform: rotateZ(180deg);
            font-size: 20px;
            color: #b3b3b3;
          }
        }
      }
    }
    //加载更多
    .addBtn {
      width: 100%;
      text-align: center;
      height: 26px;
      color: grey;
      font-size: 14px;
      margin-bottom: 20px;
      user-select: none;
    }
    //歌单简介
    .song-con-txt {
      h4 {
        font-size: 18px;
        color: #121212;
        font-weight: 400;
        margin: 12px 0 10px;
      }
      p {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>